<template>
    <el-container>
      <el-header class="homeHeader">
          <div class="title">IWANVI综合管理系统</div>
          <div>
              <el-button :icon="collapseClass" type="text" @click="collapseHandler" style="color: #000000; font-size:16px"></el-button>
              <el-button icon="el-icon-bell" type="text" style=";color: #000000; font-size:16px; margin-right: 24px;"></el-button>
              <el-dropdown class="userInfo" @command="commandHandler">
              <span class="el-dropdown-link">
                Hi，管理员
                <i><img :src="head" class="head" shape="square"></i>
              </span>
                  <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="userinfo">个人信息</el-dropdown-item>
                      <el-dropdown-item command="refresh">刷新权限</el-dropdown-item>
                      <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
                  </el-dropdown-menu>
              </el-dropdown>
          </div>
      </el-header>
      <el-container>
          <el-aside :style="leftMenuStyle" v-loading="loading">
              <el-menu router :collapse="isCollapse" text-color="#313a46" unique-opened
                    active-text-color="#4a86e8" v-for="(item,index) in menus" :index="index+''" :key="index">
                  <el-menu-item :index="item.path">
                    <i :class="item.icon"></i>
                    <span slot="title">{{item.name}}</span>
                  </el-menu-item>
              </el-menu>
          </el-aside>
          <el-main style="padding:0px;">
              <!--主区-->
              <el-container>
                <el-header class="main-header" style="height:45px; ">
                    <el-breadcrumb separator="/" >
                        <el-breadcrumb-item :to="{ path: '/home' }">Home </el-breadcrumb-item>
                        <el-breadcrumb-item v-for="(item, index) in $route.meta" :key="index" :to="item.path">{{item.name}}</el-breadcrumb-item>
                    </el-breadcrumb>
                </el-header>
                  <el-main style="padding:20px;">
                      <template v-if="this.$router.currentRoute.path=='/home'">
                        <div style="padding:5px">
                            <el-row :gutter="20" >
                                <el-col :span="24">
                                    <el-card shadow="hover">
                                        <div slot="header" class="clearfix">
                                            <span><i class="el-icon-search"></i> 文件查询</span>
                                        </div>
                                        啦啦啦
                                    </el-card>
                                </el-col>
                            </el-row>
                        </div>
                      </template>
                      <router-view class="homeRouterView"></router-view>
                  </el-main>
              </el-container>
          </el-main>
      </el-container>
  </el-container>
</template>

<script>
    export default {
        data() {
            return {
                menus: [
                    {
                        "id":1,
                        "name":"项目管理",
                        "icon":"el-icon-s-grid",
                        "path":"/project",
                        "children":null
                    },
                    {
                        "id":2,
                        "name":"文件搜索",
                        "icon":"el-icon-search",
                        "path":"/search",
                        "children":null
                    },
                    {
                        "id":3,
                        "name":"分类管理",
                        "icon":"el-icon-folder",
                        "path":"/business/bookgift/book-gift-list",
                        "children":null
                    }
                ],
                user: this.db.get("USER"),
                head: 'http://images-pro.cread.com/images/miandian/banner/2021/9/9/f2fa6c62-3f3d-44fe-90a5-6019b9227d138168926317465577613.png',
                isCollapse: false,
                loading: false,
                welcome:{},
                userActionData:[],
                activeName: 'tab_user'
            }
        },
        created() {
            document.title = "档案系统"
        },
        computed: {
            leftMenuStyle:function(){
                if(!this.isCollapse){
                    return 'width:200px; overflow:visible';
                }else{
                    return 'width:65px';
                }
            },
            collapseClass:function(){
                if(!this.isCollapse){
                    return 'el-icon-s-unfold';
                }else{
                    return 'el-icon-s-fold';
                }
            }
        },
        methods:{
            commandHandler(cmd) {
                // 退出登录
                if (cmd == 'logout') {
                    this.$confirm('此操作将注销登录, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.db.remove("USER")
                        this.db.remove("USER_ROUTER")
                        location.href = "http://mc.cread.com/user/logout"
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消操作'
                        });
                    });
                } else if (cmd == 'userinfo'){
                    this.$router.push("/personal/info");
                } else if (cmd == 'refresh'){
                    this.db.remove("USER_ROUTER");
                    location.reload();
                }
            },
            collapseHandler(){
                // 折叠菜单处理
                if(this.isCollapse){
                    this.isCollapse = false;
                }else{
                    this.isCollapse = true;
                }
            },
        }
    }
</script>

<style>
    body {margin: 0px}

    .el-main{ width: 100}

    .homeRouterView {
        margin-top: 0px; width:100%; 
    }

    .homeWelcome {
        text-align: center;
        font-family: 华文行楷;
        color: #409eff;
    }

    .homeHeader {
        background-color: #409eff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0px 10px;
        box-sizing: border-box;
    }

    .homeHeader .title {
        font-size: 30px;
        font-family: 华文行楷;
        color: #ffffff
    }

    .homeHeader .userInfo {
        cursor: pointer;
    }

    .el-dropdown-link img {
        width: 32px;
        height: 32px;
        border-radius: 24px;
        margin-left: 8px;
        margin-right: 10px; 
    }

    .el-dropdown-link {
        color: rgb(32, 25, 25);
        display: flex;
        align-items: center;
    }

    .main-header{
        line-height: 45px; 
        background:#e4f5ff; 
        padding: 15px; 
        width:100%
    }

</style>